import * as React from "react"
import { observer } from "mobx-react"
import {
  View,
  Image,
  Text,
  ViewStyle,
  ImageStyle,
  ScrollView,
  TouchableOpacity
} from "react-native"
import { Screen } from "../../components/screen"
// import { NavigationScreenProps } from "react-navigation"
import Banner from "../../components/banner"
import { px2dp } from "../../utils"
import { images } from "../../assets"
import routesPath from "../../navigation/routes"

const pageStyle: ViewStyle = {
  backgroundColor: "#c22121"
}

const wrapStyle: ViewStyle = {
  backgroundColor: "#f6f6f6",
  paddingBottom: px2dp(20)
}

const moduleStyle: ViewStyle = {
  marginTop: px2dp(20)
}

const headerStyle: ViewStyle = {
  height: px2dp(28),
  marginTop: px2dp(8),
  marginBottom: px2dp(7),
  paddingHorizontal: px2dp(13)
}

const headerImgStyle: ImageStyle = {
  width: "100%",
  resizeMode: "contain"
}

const childrenStyle: ImageStyle = {
  height: px2dp(260),
  paddingHorizontal: px2dp(13),
  width: "100%",
  resizeMode: "contain"
}

interface ModuleElementProps {
  type?: string
  headerImg?: object
  title?: string
  children?: any
}

const ModuleElement = (props: ModuleElementProps) => {
  let _childrenStyle = { ...childrenStyle }
  if (props.type && props.type === "electron") {
    _childrenStyle.paddingHorizontal = px2dp(7.5)
    _childrenStyle.height = null
  }
  return (
    <View style={moduleStyle}>
      <View style={headerStyle}>
        {props.headerImg ? (
          <Image style={headerImgStyle} source={props.headerImg} />
        ) : (
          <Text>{props.title || "note title"}</Text>
        )}
      </View>
      <View style={_childrenStyle}>{props.children}</View>
    </View>
  )
}

const electronicImgRowStyle: ViewStyle = {
  flexDirection: "row"
}

const electronicImgStyle: ImageStyle = {
  flex: 1,
  height: px2dp(120),
  marginHorizontal: px2dp(5)
}

export interface EntertainmentScreenProps {}

@observer
export default class EntertainmentScreen extends React.Component<EntertainmentScreenProps, {}> {
  render() {
    return (
      <Screen preset="scroll" backgroundColor="red" style={pageStyle} testId="entertainmentScreen">
        <ScrollView style={wrapStyle}>
          <Banner imgItems={images.entertainment.banner.demoList} />
          <ModuleElement title="真人" headerImg={images.entertainment.index.liveTitle}>
            <TouchableOpacity
              onPress={() => {
                this.props.history.push(routesPath.PATH_EVENT)
              }}
            >
              <Image style={childrenStyle} source={images.entertainment.entry.live.ag} />
            </TouchableOpacity>
          </ModuleElement>

          <ModuleElement
            title="电子"
            headerImg={images.entertainment.index.electronTitle}
            type="electron"
          >
            <View style={electronicImgRowStyle}>
              <Image
                style={electronicImgStyle}
                source={images.entertainment.entry.electron.agElectron}
              />
              <Image
                style={electronicImgStyle}
                source={images.entertainment.entry.electron.agFish}
              />
            </View>
            <View style={{ ...electronicImgRowStyle, marginTop: px2dp(8) }}>
              <Image
                style={electronicImgStyle}
                source={images.entertainment.entry.electron.mwElectron}
              />
              <Image
                style={electronicImgStyle}
                source={images.entertainment.entry.electron.mwFish}
              />
            </View>
          </ModuleElement>

          <ModuleElement title="彩票" headerImg={images.entertainment.index.lotteryTitle}>
            <Image style={childrenStyle} source={images.entertainment.entry.lottery["5gm"]} />
          </ModuleElement>

          <ModuleElement title="棋牌" headerImg={images.entertainment.index.chessTitle}>
            <Image style={childrenStyle} source={images.entertainment.entry.chess.ld} />
          </ModuleElement>
        </ScrollView>
      </Screen>
    )
  }
}
